<template>
  <div class="leave">
    <el-tabs type="border-card">
    <el-tab-pane>
        <span slot="label">未处理 <el-badge class="mark" :max="9" :value="data1.length" :hidden="data1.length==0" /></span>
        <el-empty v-if="data1.length==0" :image-size="290"></el-empty>
        <div v-else class="data">
            <el-carousel :autoplay="false">
                <el-carousel-item v-for="o in data1" :key="o.id">
                    <el-descriptions title="计算机院请假条"  border>
                        <template slot="extra">
                        <el-button type="primary" icon="el-icon-check" size="small" @click="setState(true,o)">同意</el-button>
                        <el-button type="warning" icon="el-icon-close" size="small" @click="setState(false,o)">拒绝</el-button>
                        </template>
                        <el-descriptions-item  label="姓名" label-class-name="my-label" content-class-name="my-content">{{o.name}}</el-descriptions-item>
                        <el-descriptions-item label="学号">{{o.sid}}</el-descriptions-item>
                        <el-descriptions-item label="性别">{{o.gender}}</el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{o.phone}}</el-descriptions-item>
                        <el-descriptions-item label="年级专业">{{o.special}}</el-descriptions-item>
                        <el-descriptions-item label="宿舍号">{{o.home}}</el-descriptions-item>
                        <el-descriptions-item label="请假时间">{{o.date}}</el-descriptions-item>
                        <el-descriptions-item label="销假时间">{{o.endtime}}</el-descriptions-item>
                        <el-descriptions-item label="状态">
                        <el-tag  size="small" type="warning">{{o.state}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="请假事由">{{o.reason}}</el-descriptions-item>
                    </el-descriptions>
                </el-carousel-item>
            </el-carousel>
        </div>
    </el-tab-pane>
    <el-tab-pane label="已处理">
        <span slot="label">已处理</span>
        <el-empty v-if="data2.length==0" :image-size="290"></el-empty>
        <div v-else class="data">
            <el-carousel :autoplay="false">
                <el-carousel-item v-for="o in data2" :key="o.id">
                    <el-descriptions title="计算机院请假条"  border>
                        <template slot="extra">
                            总计:{{data2.length}}
                        </template>
                        <el-descriptions-item  label="姓名" label-class-name="my-label" content-class-name="my-content">{{o.name}}</el-descriptions-item>
                        <el-descriptions-item label="学号">{{o.sid}}</el-descriptions-item>
                        <el-descriptions-item label="性别">{{o.gender}}</el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{o.phone}}</el-descriptions-item>
                        <el-descriptions-item label="年级专业">{{o.special}}</el-descriptions-item>
                        <el-descriptions-item label="宿舍号">{{o.home}}</el-descriptions-item>
                        <el-descriptions-item label="请假时间">{{o.date}}</el-descriptions-item>
                        <el-descriptions-item label="销假时间">{{o.endtime}}</el-descriptions-item>
                        <el-descriptions-item label="状态">
                        <el-tag  size="small" :type="o.state==='同意'?'success':'danger'">{{o.state}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="请假事由">{{o.reason}}</el-descriptions-item>
                    </el-descriptions>
                </el-carousel-item>
            </el-carousel>
        </div>
    </el-tab-pane>
    <el-tab-pane label="未销假">
        <span slot="label">未销假 <el-badge class="mark" :max="9" :value="data3.length" :hidden="data3.length==0" /></span>
        <el-empty v-if="data3.length==0" :image-size="290"></el-empty>
        <div v-else class="data" >
            <el-carousel :autoplay="false">
                <el-carousel-item v-for="o in data3" :key="o.id">
                    <el-descriptions title="计算机院请假条"  border>
                        <template slot="extra">
                            
                        </template>
                        <el-descriptions-item  label="姓名" label-class-name="my-label" content-class-name="my-content">{{o.name}}</el-descriptions-item>
                        <el-descriptions-item label="学号">{{o.sid}}</el-descriptions-item>
                        <el-descriptions-item label="性别">{{o.gender}}</el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{o.phone}}</el-descriptions-item>
                        <el-descriptions-item label="年级专业">{{o.special}}</el-descriptions-item>
                        <el-descriptions-item label="宿舍号">{{o.home}}</el-descriptions-item>
                        <el-descriptions-item label="请假时间">{{o.date}}</el-descriptions-item>
                        <el-descriptions-item label="销假时间">{{o.endtime}}</el-descriptions-item>
                        <el-descriptions-item label="状态">
                        <el-tag  size="small" :type="o.affirm?'success':'warning'">{{o.affirm?'已销假':'未销假'}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="请假事由">{{o.reason}}</el-descriptions-item>
                    </el-descriptions>
                </el-carousel-item>
            </el-carousel>
            
        </div>
    </el-tab-pane>
    <el-tab-pane label="已销假">
        <span slot="label">已销假</span>
        <el-empty v-if="data4.length==0" :image-size="290"></el-empty>
        <div v-else class="data" >
            <el-carousel :autoplay="false">
                <el-carousel-item v-for="o in data4" :key="o.id">
                    <el-descriptions title="计算机院请假条"  border>
                        <template slot="extra">
                            总计:{{data4.length}}
                        </template>
                        <el-descriptions-item  label="姓名" label-class-name="my-label" content-class-name="my-content">{{o.name}}</el-descriptions-item>
                        <el-descriptions-item label="学号">{{o.sid}}</el-descriptions-item>
                        <el-descriptions-item label="性别">{{o.gender}}</el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{o.phone}}</el-descriptions-item>
                        <el-descriptions-item label="年级专业">{{o.special}}</el-descriptions-item>
                        <el-descriptions-item label="宿舍号">{{o.home}}</el-descriptions-item>
                        <el-descriptions-item label="请假时间">{{o.date}}</el-descriptions-item>
                        <el-descriptions-item label="销假时间">{{o.endtime}}</el-descriptions-item>
                        <el-descriptions-item label="状态">
                        <el-tag  size="small" :type="o.affirm?'success':'warning'">{{o.affirm?'已销假':'未销假'}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="请假事由">{{o.reason}}</el-descriptions-item>
                    </el-descriptions>
                </el-carousel-item>
            </el-carousel>
            
        </div>
    </el-tab-pane>
    
    </el-tabs>
  </div>
</template>

<script>
export default {
    components:{
    },
    data() {
        return {
            data1:[],
            data2:[],
            data3:[],
            data4:[],
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        async getData(){
            this.data1=[];
            this.data2=[];
            this.data3=[];
            this.data4=[];
            let data =await this.$api.LeaveNote.doGet();
            const s = data.data.split("\r\n")
            for (let i in s){
                if(i<1 || s[i]==='')continue 
                let msg = s[i].split(',')
                let from={
                    id:i,
                    name:msg[0].split('：')[1],
                    sid:msg[1].split('：')[1],
                    gender:msg[2].split('：')[1],
                    phone:msg[3].split('：')[1] ,
                    special:msg[4].split('：')[1],
                    home:msg[5].split('：')[1],
                    date:msg[6].split('：')[1],
                    reason:msg[7].split('：')[1],
                    endtime:msg[8].split('：')[1],
                    state:msg[9].split('：')[1],
                    affirm:msg[10].split('：')[1]==="false"?false:true,
                }
                if(from. state==="待审核")this.data1.push(from)
                else this.data2.push(from)
                if(!from.affirm && from.state === "同意")this.data3.push(from)
                if(from.affirm && from.state === "同意")this.data4.push(from)
            }
        },
        setState(k,o){
            const s = k?"同意":"拒绝"
            this.$message(s)
            console.log(o);
            let msg = `state="${s}" where `
                    +`name="${o.name}"and gender="${o.gender}"and sid="${o.sid}"`
                    +`and phone="${o.phone}"and special="${o.special}" `
                    +`and home="${o.home}"and date="${o.date}" `
                    +`and reason="${o.reason}"and endtime="${o.endtime}" `
            this.$api.LeaveNote.doPost("update",msg);
            this.getData();
        }
    },
}
</script>

<style lang="scss" scoped>
.leave{
    .data{
        height: 435px;
        display: flex;
        flex-wrap: wrap;
        .el-carousel  {
            width: 100%;
            height: 100%;
            padding: 10px;
              .el-carousel__item h3 {
                color: #475669;
                font-size: 18px;
                opacity: 0.75;
                line-height: 300px;
                margin: 0;
            }
        }
    }
}
</style>